<template>
    <div class="wrapper">
        <h1>LiveCycle</h1>
        <GlobalHello />
        全局属性：{{ appVersion }}
        <h2 v-mystyle="sum">自定义指令</h2>
        <h2>{{ sum }}</h2>
        <button @click="add">+1</button>
    </div>
</template>

<script lang="ts" setup name="LiveCycle">

import { ref, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

let sum = ref(0)
function add() {
    sum.value++
}

// 创建
console.log('LiveCycle创建')

// 挂载
onBeforeMount(() => {
    console.log('LiveCycle挂载前')
})
onMounted(() => {
    console.log('LiveCycle挂载完毕')
})

// 更新
onBeforeUpdate(() => {
    console.log('LiveCycle更新前')
})
onUpdated(() => {
    console.log('LiveCycle更新完毕')
})

// 卸载
onBeforeUnmount(() => {
    console.log('LiveCycle卸载前')
})

onUnmounted(() => {
    console.log('LiveCycle卸载后')
})

</script>

<!-- Vue2 的生命周期 -->
<!-- 
<script lang="ts">
export default {
    name: 'LiveCycle',
    data() {
        return {
            sum: 1
        }
    },
    methods: {
        add() {
            this.sum += 1
        }
    },
    beforeCreate() {
        console.log('LiveCycle创建前')
    },
    created() {
        console.log('LiveCycle创建完毕')
    },
    beforeMount() {
        console.log('LiveCycle挂载前')
    },
    mounted() {
        console.log('LiveCycle挂载完毕')
    },
    beforeUpdate() {
        console.log('LiveCycle更新前')
    },
    updated() {
        console.log('LiveCycle更新完毕')
    },
    beforeUnmount() {
        console.log('LiveCycle卸载前')
    },
    unmounted() {
        console.log('LiveCycle卸载完毕')
    },
}
</script>
-->

<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>